<template>
    <el-container>
        <el-aside :width="elAsideWith">
            <main-nav @submitToggle="handleToggle" :num="8"></main-nav>
        </el-aside>
        <el-container>
            <el-header><main-header></main-header></el-header>
            <el-header><main-tabs></main-tabs></el-header>
            <el-main>
                <router-view v-slot="{ Component }">
                    <transition name="fade-transform" mode="out-in">
                        <keep-alive :include="cachedPages" :max="100">
                            <component class="main-app" :is="Component" />
                        </keep-alive>
                    </transition>
                </router-view>
            </el-main>
        </el-container>
    </el-container>
</template>
<script setup>
import { getCurrentInstance, watch, computed } from 'vue'
import mainHeader from '@Components/main-header.vue'
import mainNav from '@Components/main-nav.vue'
import mainTabs from '@Components/main-tabs.vue'

defineOptions({
    name: 'layout',
})

// 初始化
const { appContext, ctx } = getCurrentInstance()
const { $router, $store } = appContext.config.globalProperties

let elAsideWith = $ref('200px')
let handleToggle = isValue => {
    elAsideWith = !isValue ? '200px' : '48px'
}

// 设置组件缓存 监听路由变化
let cachedPages = $ref(computed(() => $store.getters['user/getCachedPages']))
let currentRoute = computed(() => $router.currentRoute)
watch(
    currentRoute,
    newRoute => {
        let route = $ref(newRoute)
        if (route.meta.keepAlive) {
            $store.dispatch('user/addCachedPages', route.name)
        }
    },
    { deep: true, immediate: true }
)
</script>

<style scoped lang="scss">
.el-header {
    padding: 0;
    height: 47px;
    background: #fff;
    border-bottom: 1px solid #dcdfe6;
}
.el-container {
    height: calc(100%);
    overflow: hidden;
}
.el-aside {
    height: 100%;
    border-right: 1px solid #dcdfe6;
    background: #fff;
    transition: 0.2s ease-in 0s;
    overflow: hidden;
}
.el-main {
    padding: 15px;
    position: relative;
    .main-app {
        background: #fff;
        padding: 15px;
        font-size: 14px;
        min-height: 100%;
    }
}
</style>
